<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
<ui:component>
    <style type="text/css">
        .left {
            float: left;
            text-align: left;
        }

        .right {
            float: right;
            text-align: right;
        }
    </style>
    <center>
        <h:panelGrid columnClasses="left">
            <h:outputLabel value="This will add/update your username"/>
            <h:panelGrid columns="1">
                <h:panelGrid columns="2">
                    <h:inputText id="usernameInput" value="#{accountEditBean.username}" size="30" validatorMessage="Minimum five alphanumeric characters long">
                        <f:validateLength minimum="5"/>
                        <f:validator validatorId="alphanumValidator"/>
                        <rich:ajaxValidator event="onblur"/>
                    </h:inputText>
                    <a4j:commandButton value="Save Changes" action="#{accountEditBean.changeUsername}"  reRender="changerMessage, username"/>
                </h:panelGrid>
                <rich:message for="usernameInput"/>
                <rich:separator height="1px" width="100%"/>
                <!--<h:panelGrid columns="2" columnClasses="left, right" style="width:100%">-->
                    <!--<h:outputLabel value=""/>-->
                    <!--<a4j:commandButton value="Check Availability"/>-->
                <!--</h:panelGrid>-->
            </h:panelGrid>
        </h:panelGrid>
    </center>
</ui:component>


</html>
